<template>
  <div class="zs-table-page-container" v-loading="loading">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="formData.biProjectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目"
          @change="changeProject()">
          <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
            :value="item.biProjectCode" />
        </el-select>
        <el-date-picker class="zs-space-right-sm" v-model="formData.dataTime" :type="pickerDate" placeholder="日期"
          :clearable="false" :value-format="valueFormat" @change="getUnitList"  disabled/>
        <el-select v-model="formData.floorname" filterable multiple collapse-tags collapse-tags-tooltip :teleported="false"
          class="zs-select-md zs-space-right-sm" placeholder="楼层" clearable>
          <el-option v-for="(item, index) in floorList" :key="index" :label="item" :value="item" />
        </el-select>
        <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
          <template #reference>
            <el-button class="zs-btn-square-solid"
              :class="{ 'zs-btn-square-solid-active': formData.buildingname.length > 0 || formData.unitecode.length > 0 }">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </template>
          <template #default>
            <el-select v-model="formData.buildingname" filterable multiple collapse-tags collapse-tags-tooltip :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="楼栋" clearable>
              <el-option v-for="(item, index) in buildList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.unitecode" filterable multiple collapse-tags collapse-tags-tooltip :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="单元编号" clearable>
              <el-option v-for="(item, index) in unitList" :key="index" :label="item" :value="item" />
            </el-select>
          </template>
        </el-popover>
        <el-button class="zs-btn-plain" @click="getData()">
          查询
        </el-button>
      </span>
      <span class="zs-layout-flex-row">
        <el-button class="zs-btn-plain" @click="handleDownload">
          <el-icon class="el-icon--left">
            <Upload />
          </el-icon>导出
        </el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe">
        <el-table-column label="序号" width="60" :align="'center'">
          <template #default="scope">
            {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="propertyType" label="资产类型" :align="'center'" width="100"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="floorname" label="楼层" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="unitcode" label="单元编号" :align="'left'" width="300"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="innerarea" label="租赁面积" :align="'right'" width="120"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="kzStartData" label="空置开始" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="kzTs" label="空置期" :align="'right'" width="120"
          :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积：㎡</div>
    </div>
    <div class="zs-space-top-sm zs-table-page-pagination">
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
        :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/Manage/Business/rentalSituation'
// import { toThousands, dateFormat } from '@/utils/number-util'
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { downloadNewFile } from "@/utils/publicUtils";
// const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let loading = ref(false)

let biProjectCode = ref(route.biProjectCode)
const updateDate = route.updateDate
const tabPermi = route.tabPermi
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')
let formData = reactive({
  biProjectCode: biProjectCode, // 项目
  dataTime: updateDate, // 日期
  buildingname: [], // 楼栋
  floorname: [], // 楼层
  unitecode: [], // 单元编号
})
let projectList = ref([]) // 项目列表
let buildList = ref([]) // 楼栋列表
let floorList = ref([]) // 楼层列表
let unitList = ref([]) // 单元编号列表

// 获取项目列表
const getPorjectList = () => {
  dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
    if (res.data.code == 200) {
      projectList.value = res.data.data
    }
  })
}

// 获取楼栋列表
const getBuildList = () => {
  formData.buildingname = []
  detailApi.vacancyBuildingDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      buildList.value = res.data.data
    }
  })
}
// 获取楼层列表
const getFloorList = () => {
  formData.floorname = []
  detailApi.vacancyFloorDownApi(formData.biProjectCode).then((res) => {
    if (res.data.code == 200) {
      floorList.value = res.data.data
    }
  })
}
// 获取单元编号
const getUnitList = () => {
  formData.unitecode = []
  detailApi.vacancyUnitDownApi({ biProjectCode: formData.biProjectCode, dataTime: formData.dataTime }).then((res) => {
    if (res.data.code == 200) {
      unitList.value = res.data.data
    }
  })
}


// 改变日期组件，重新获取品牌下拉选，并清空品牌
const changeProject = () => {
  getBuildList()
  getFloorList()
  getUnitList()
}

// 分页
const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
  curPageSize.value = val
  getList()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

const tableData = ref([])
const getList = () => {
  tableData.value = []
  detailApi.vacancyListApi({
    pageNo: currentPage.value,
    pageSize: curPageSize.value,
    ...formData
  }).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.childList
      total.value = res.data.data.totalCount
      loading.value = false
    }
  })
}
const getData = () => {
  currentPage.value = 1
  loading.value = true
  getList()
}

const init = () => {
  getData()

  getPorjectList()

  getBuildList()
  getFloorList()
  getUnitList()

}
init()

const handleDownload = async () => {
  const fileName = `空置列表.xls`
  let fileData
  await detailApi.vacancyExportApi(
    {
      pageNo: currentPage.value,
      pageSize: curPageSize.value,
      ...formData
    }
  ).then(res => {
    fileData = res.data
  })
  downloadNewFile(fileData, fileName)
}

</script>


<style scoped lang="scss"></style>
